<template>
	<view class="uni-cursor-point">
		<!-- 展开菜单容器 -->
		<view 
			v-if="popMenu && (isLeftBottom||isRightBottom||isLeftTop||isRightTop) && content.length > 0" 
			class="uni-fab"
			:style="fabContainerStyle" 
		>
			<view 
				:class="{
					'uni-fab__content--left': horizontal === 'left',
					'uni-fab__content--right': horizontal === 'right',
					'uni-fab__content--flexDirection': direction === 'vertical',
					'uni-fab__content--flexDirectionStart': flexDirectionStart,
					'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
					'uni-fab__content--other-platform': !isAndroidNvue
				}" 
				:style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
				class="uni-fab__content" 
				elevation="5"
			>
				<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
				<view 
					v-for="(item, index) in content" 
					:key="index" 
					:class="{ 'uni-fab__item--active': isShow }"
					class="uni-fab__item" 
					@click="_onItemClick(index, item)"
				>
					<image 
						:src="item.active ? item.selectedIconPath : item.iconPath" 
						class="uni-fab__item-image"
						mode="aspectFit" 
					/>
					<text 
						class="uni-fab__item-text"
						:style="{ color: item.active ? styles.selectedColor : styles.color }"
					>
						{{ item.text }}
					</text>
				</view>
				<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
			</view>
		</view>
		
		<!-- 主按钮 -->
		<view 
			class="uni-fab__circle uni-fab__plus" 
			:style="[fabButtonStyle, { 'background-color': styles.buttonColor }]" 
			@click="_onClick"
		>
			<uni-icons 
				class="fab-circle-icon" 
				:type="styles.icon" 
				:color="styles.iconColor" 
				size="32"
				:class="{'uni-fab__plus--active': isShow && content.length > 0}"
			></uni-icons>
		</view>
	</view>
</template>

<script>
let platform = 'other'
// #ifdef APP-NVUE
platform = uni.getSystemInfoSync().platform
// #endif

export default {
	name: 'fabBottonCusum',
	emits: ['fabClick', 'trigger'],
	props: {
		// 新增：位置控制 props
		position: {
			type: String,
			default: 'rightBottom', // 默认右下：rightBottom/rightTop/leftBottom/leftTop
			validator: (val) => ['rightBottom', 'rightTop', 'leftBottom', 'leftTop'].includes(val)
		},
		x: {
			type: String,
			default: '15px' // 水平偏移（默认15px）
		},
		y: {
			type: String,
			default: '30px' // 垂直偏移（默认30px）
		},
		// 原有 props
		pattern: {
			type: Object,
			default () { return {} }
		},
		horizontal: {
			type: String,
			default: 'left'
		},
		vertical: {
			type: String,
			default: 'bottom'
		},
		direction: {
			type: String,
			default: 'horizontal'
		},
		content: {
			type: Array,
			default () { return [] }
		},
		show: {
			type: Boolean,
			default: false
		},
		popMenu: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			fabShow: false,
			isShow: false,
			isAndroidNvue: platform === 'android',
			styles: {
				color: '#3c3e49',
				selectedColor: '#007AFF',
				backgroundColor: '#fff',
				buttonColor: '#007AFF',
				iconColor: '#fff',
				icon: 'plusempty'
			}
		}
	},
	computed: {
		// 定位类型判断（替代原有 leftBottom 等）
		isLeftBottom() { return this.position === 'leftBottom' },
		isRightBottom() { return this.position === 'rightBottom' },
		isLeftTop() { return this.position === 'leftTop' },
		isRightTop() { return this.position === 'rightTop' },
		
		// 展开菜单容器定位样式
		fabContainerStyle() {
			const style = {
				position: 'fixed',
				zIndex: 10,
				borderRadius: '45px'
			};
			// 根据 position 设置水平/垂直定位
			if (this.isLeftBottom || this.isLeftTop) {
				style.left = this.x; // 左对齐用 left
			} else {
				style.right = this.x; // 右对齐用 right
			}
			if (this.isLeftBottom || this.isRightBottom) {
				style.bottom = this.getSafeY(); // 下对齐用 bottom（兼容安全区域）
			} else {
				style.top = this.y; // 上对齐用 top
			}
			return style;
		},
		
		// 主按钮定位样式
		fabButtonStyle() {
			const style = {
				position: 'fixed',
				width: '55px',
				height: '55px',
				borderRadius: '45px',
				zIndex: 11,
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center'
			};
			// 与容器定位逻辑一致
			if (this.isLeftBottom || this.isLeftTop) {
				style.left = this.x;
			} else {
				style.right = this.x;
			}
			if (this.isLeftBottom || this.isRightBottom) {
				style.bottom = this.getSafeY();
			} else {
				style.top = this.y;
			}
			return style;
		},
		
		// 原有计算属性（保留）
		contentWidth() {
			return (this.content.length + 1) * 55 + 15 + 'px'
		},
		contentWidthMin() {
			return '55px'
		},
		boxWidth() {
			return this.getPosition(3, 'horizontal')
		},
		boxHeight() {
			return this.getPosition(3, 'vertical')
		},
		flexDirectionStart() {
			return this.getPosition(1, 'vertical', 'top')
		},
		flexDirectionEnd() {
			return this.getPosition(1, 'vertical', 'bottom')
		},
		horizontalLeft() {
			return this.getPosition(2, 'horizontal', 'left')
		},
		horizontalRight() {
			return this.getPosition(2, 'horizontal', 'right')
		}
	},
	watch: {
		pattern: {
			handler(val) {
				this.styles = Object.assign({}, this.styles, val)
			},
			deep: true
		},
		show(val) {
			this.isShow = val
		}
	},
	created() {
		this.isShow = this.show
		this.styles = Object.assign({}, this.styles, this.pattern)
	},
	methods: {
		// 计算底部安全区域偏移（适配刘海屏）
	  getSafeY() {
	    // 统一单位为 px（父组件传递 y 时用 px）
	    const yInPx = this.y.replace('px', ''); // 假设 y 传递的是 '50px'
	    // #ifdef APP-NVUE
	    const safeBottom = uni.getSystemInfoSync().windowBottom || 0; // px 单位
	    return `${parseInt(yInPx) + safeBottom}px`; // 纯 px 计算
	    // #endif
	    // #ifdef H5
	    const windowBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--window-bottom')) || 0;
	    return `${parseInt(yInPx) + windowBottom}px`;
	    // #endif
	    return this.y; // 其他平台直接用 y（确保是 px）
	  },
		_onClick() {
			this.$emit('fabClick')
			if (!this.popMenu) return
			this.isShow = !this.isShow
		},
		open() { this.isShow = true },
		close() { this.isShow = false },
		_onItemClick(index, item) {
			if (!this.isShow) return
			this.$emit('trigger', { index, item })
		},
		getPosition(types, paramA, paramB) {
			if (types === 0) {
				return this.horizontal === paramA && this.vertical === paramB
			} else if (types === 1) {
				return this.direction === paramA && this.vertical === paramB
			} else if (types === 2) {
				return this.direction === paramA && this.horizontal === paramB
			} else {
				return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
			}
		}
	}
};
</script>

<style lang="scss">
$uni-shadow-base:0 1px 5px 2px rgba(0, 0, 0, 0.3) !default;

.uni-fab {
	/* 移除固定定位样式，改为内联动态设置 */
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: $uni-shadow-base;
}

.uni-cursor-point {
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-fab--active {
	opacity: 1;
}

/* 移除所有固定位置的类样式（原 leftBottom/rightBottom 等） */

.uni-fab__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	border-radius: 55px;
	overflow: hidden;
	transition-property: width, height;
	transition-duration: 0.2s;
	width: 55px;
	border: 1rpx solid #DDDDDD;
}

.uni-fab__content--other-platform {
	border-width: 0;
	box-shadow: $uni-shadow-base;
}

.uni-fab__content--left { justify-content: flex-start; }
.uni-fab__content--right { justify-content: flex-end; }
.uni-fab__content--flexDirection { flex-direction: column; justify-content: flex-end; }
.uni-fab__content--flexDirectionStart { flex-direction: column; justify-content: flex-start; }
.uni-fab__content--flexDirectionEnd { flex-direction: column; justify-content: flex-end; }

.uni-fab__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 55px;
	height: 55px;
	opacity: 0;
	transition: opacity 0.2s;
}

.uni-fab__item--active { opacity: 1; }
.uni-fab__item-image { width: 20px; height: 20px; margin-bottom: 4px; }
.uni-fab__item-text { color: #FFFFFF; font-size: 12px; line-height: 12px; margin-top: 2px; }
.uni-fab__item--first { width: 55px; }

.uni-fab__plus {
	font-weight: bold;
}

.fab-circle-icon {
	transform: rotate(0deg);
	transition: transform 0.3s;
	font-weight: 200;
}

.uni-fab__plus--active {
	transform: rotate(135deg);
}
</style>